<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>04-iframe-同源通信-父页面</title>
  </head>
  <body>
    <h2>父页面</h2>
    <button id="btn">修改子页面数据</button>
    <hr />
    <iframe
      id="iframe"
      src="./04-iframe-同源通信-子页面.html"
      frameborder="0"
    ></iframe>
    <script>
      /*
        iframe同源通信：
          父页面给子页面传递数据（父向子传参）
            父页面定义数据
            子页面接收数据

          子页面给父页面传递数据（子向父传参）
             父页面收数据
            子页面定义数据
      */
      //  父页面定义数据
      // window.aaa = "父页面数据";

      // 获取iframe对象
      const iframe = document.getElementById("iframe");
      // 获取子页面window对象
      const childWindow = iframe.contentWindow;
      // 注意：iframe页面渲染是异步的
      childWindow.onload = function () {
        console.log(childWindow.aaa);
      };

      btn.onclick = function () {
        // 获取子页面dom对象
        const childDocument = iframe.contentDocument;
        childDocument.getElementById("msg").innerHTML = "good good study";
        // console.log(childDocument);
      };
    </script>
  </body>
</html>
